<div class="tab-wrap">
    <#if isUnlocked == false>
		<div class="lock-tips">
			<div class="title">
				Below is a sample report. This feature only available to <em>ADVANCED</em> version or higher.
				<br>
				Please use credit to unlock the report or upgrade your membership.
			</div>
			<div class="right">
				<button class="gd-btn btn-default">Unlock</button>
				<button class="gd-btn btn-info">Upgrade</button>
			</div>
		</div>
        <#if isMobile == false>
			<img class="demo-img" src="${request.contextPath}/static/img/ins/Ads-Web.png" alt="sample report">
        <#else>
			<img class="demo-img" src="${request.contextPath}/static/img/ins/Ads.png"
			     srcset="${request.contextPath}/static/img/ins/Ads@2x.png 2x" alt="sample report">
        </#if>
    <#else>
		<div class="wrap-item">
			<div class="wrap-item__title" style="margin-top: 0">
				Ads Status
                <#if isMobile == true>
					<div class="gd-popover" id="adGobalTip"
					     data-title="Tips"
					     content="<dl class='modal-tip'>
							<dt>1. Ads Posts</dt>
							<dd>Amount of posts which tagged business accounts in recent 30-day.</dd>
							<dt>2. Ads / Posts Ratio</dt>
							<dd>Ads Posts / Total Posts in recent 30-day.</dd>
							<dt>3. Avg Ads Engagements</dt>
							<dd>Average comments and likes of ads posts in recent 30-day.</dd>
							<dt>4. Avg Ads ER</dt>
							<dd>Average business account tagged posts engagement / total follower count * 100%</dd>
						</dl>">
						<i class="iconfont iconfaq"></i>
					</div>
                </#if>
				<div class="title__right">
					<div class="gd-btn-group" id="adsStatusBtnGroup">
						<div class="gd-btn is-active">All</div>
						<div class="gd-btn">Image</div>
						<div class="gd-btn">Video</div>
					</div>
					<div class="gd-select adstatus-select" id="adsStatusSelect">
						<div class="gd-select-title">
							<div class="label">All</div>
							<i class="iconfont icondown1"></i>
						</div>
						<div class="gd-select-wrap">
							<ul>
								<li class="gd-option" data-index="0">All</li>
								<li class="gd-option" data-index="1">Image</li>
								<li class="gd-option" data-index="2">Video</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="quality-wrap">
				<div class="quality-list" id="adsBaseInfo">
					<div class="quality-item">
						<div class="title">
							Ads Posts
                            <#if isMobile == false>
								<div class="gd-popover"
								     content="Amount of posts which tagged business accounts in recent 30-day.">
									<i class="iconfont iconfaq"></i>
								</div>
                            </#if>
						</div>
						<div class="sub-title">
							-
						</div>
					</div>
					<div class="quality-item">
						<div class="title">
							Ads/Post Ratio
                            <#if isMobile == false>
								<div class="gd-popover"
								     content="Ads Posts / Total Posts in recent 30-day.">
									<i class="iconfont iconfaq"></i>
								</div>
                            </#if>
						</div>
						<div class="sub-title">
							-
						</div>
					</div>
					<div class="quality-item">
						<div class="title">
							<span>Avg Ads Engagements</span>
                            <#if isMobile == false>
								<div class="gd-popover"
								     content="Average comments and likes of ads posts in recent 30-day.">
									<i class="iconfont iconfaq"></i>
								</div>
                            </#if>
						</div>
						<div class="sub-title">
							-
						</div>
					</div>
					<div class="quality-item">
						<div class="title">
							Avg Ads ER
                            <#if isMobile == false>
								<div class="gd-popover"
								     content="Average business account tagged posts engagement / total follower count * 100%">
									<i class="iconfont iconfaq"></i>
								</div>
                            </#if>
						</div>
						<div class="sub-title">
							-
						</div>
					</div>
				</div>
				<div class="quality-ana" id="adsBaseInfoAna">
					<div class="title">
						Ads Performance
                        <#--						<div class="account-state excellent" id="adsBaseInfoAnaLabel">Excellent</div>-->
					</div>
					<div class="sub-title">
						Avg ads ER is <span>-%</span>, surpassing <span>-%</span> similar accounts of <span>-%</span> on
						average.
					</div>
				</div>
			</div>
		</div>
		<div class="wrap-item">
			<div class="wrap-item__title">
				Tagged Business Accounts
				<div class="gd-popover"
                        <#if isMobile == true>
							data-title="Tagged Business Account"
                        </#if>
                     content="Recent 30-day tagged business accounts and average ER on each business account. If it is higher than the average ER, this means that ad posts perform better than regular and look native.">
					<i class="iconfont iconfaq"></i>
				</div>
			</div>
			<div class="tagBrand-wrap" id="tagBrandWrap">
				<div class="gd-select">
					<div class="gd-select-title">
						<div class="label">Primary Category</div>
						<i class="iconfont icondown1"></i>
					</div>
					<div class="gd-select-wrap">
						<ul id="tagBrandCategorySelect">
							<li class="gd-option is-active" value="0">All</li>
							<li class="gd-option" value="1">Male</li>
							<li class="gd-option" value="2">Female</li>
						</ul>
					</div>
				</div>
				<ul class="tag-list" id="tagBrandCategoryList">
					<li class="tag-item is-active">&nbsp;&nbsp;</li>
					<li class="tag-item">&nbsp;&nbsp;</li>
					<li class="tag-item">&nbsp;&nbsp;</li>
				</ul>
				<div class="brand-list" id="tagBrandList">
					<div class="brand-item">
						<img class="brand-avatar" src="" alt="">
						<div class="brand-info">
							<div class="title">Nike</div>
							<div class="sub-title">Cinema & Actor...</div>
						</div>
						<div class="brand-data">
							<div class="brand-data-item">
								<div class="label">Tagged</div>
								<b>90</b>
							</div>
							<div class="line"></div>
							<div class="brand-data-item">
								<div class="label">Avg ER</div>
								<b>80%</b>
							</div>
						</div>
					</div>
					<div class="brand-item">
						<img class="brand-avatar" src="" alt="">
						<div class="brand-info">
							<div class="title">Nike</div>
							<div class="sub-title">Cinema & Actor...</div>
						</div>
						<div class="brand-data">
							<div class="brand-data-item">
								<div class="label">Tagged</div>
								<b>90</b>
							</div>
							<div class="line"></div>
							<div class="brand-data-item">
								<div class="label">Avg ER</div>
								<b>80%</b>
							</div>
						</div>
					</div>
				</div>
				<div class="wrap-footer" onclick="getAdTagBrandList()">View More</div>
			</div>
		</div>
    </#if>
</div>
<script>
    let categoryName = ''
    let tagBrandPostCateGory = ''
    let tagBrandPage = 1
    let tagBrandPostPage = 1
    let tagBrandPostType = 1
    let adGobal = {}

    function getAdTagBrandList() {
        const tagBrandList = document.getElementById('tagBrandList')
        tagBrandList.showLoading()
        return _axios.post('/ins/blogger/adTagBrand', {
            uid: ${blogger.uid?c},
            page: tagBrandPage,
            pageSize: 10,
            categoryName: categoryName
        }).then(res => {
            if (res.Code === 200) {
                if (tagBrandList) {
                    const data = res.Data.list
                    let str = ''
                    const viewMoreEle = tagBrandList.nextElementSibling
                    if (res.Data.lastPage) {
                        viewMoreEle && viewMoreEle.hide()
                    } else {
                        viewMoreEle && viewMoreEle.show()
                    }
                    if (tagBrandPage > 1) {
                        str = tagBrandList.innerHTML
                    }
                    data.forEach(item => {
                        str += '<div class="brand-item">' +
                            '<img class="brand-avatar" src="' + getImage(item.picUrl, IMAGE_TYPE.BLOGGER, IMAGE_SIZE.SMALL) + '" alt="' + item.fullName + '">' +
                            '<div class="brand-info">' +
                            '<div class="title">' + item.username + '</div>'
                        if (item.categoryName) {
                            str += '<div class="sub-title">' + item.categoryName + '</div>'
                        } else if (item.overallCategoryName) {
							str += '<div class="sub-title">' + item.overallCategoryName + '</div>'
						}
                        str += '</div>' +
                            '<div class="brand-data">' +
                            '<div class="brand-data-item">' +
                            '<div class="label">Tagged</div>' +
                            '<b>' + item.tagCount + '</b>' +
                            '</div>' +
                            '<div class="line"></div>' +
                            '<div class="brand-data-item">' +
                            '<div class="label">Avg ER</div>' +
                            '<b>' + numFormat(+item.avgEr) + '%</b>' +
                            '</div>' +
                            '</div>' +
                            '</div>'
                    })
                    tagBrandList.innerHTML = str
                    tagBrandPage++
                }
                tagBrandList.hideLoading()
            }
        })
    }
</script>
<script type="module">
    import {Select} from '${request.contextPath}/static/js/gd-ui/select/index.es.js'

    <#if login == true && isUnlocked == true>
    initAds()
    </#if>

    function initAds() {
        getAdGoal()
        getAdTagBrandCategory()
        getAdTagBrandList()
        initAdsEvent()
    }

    function initAdsEvent() {
        // pc
        const btns = document.querySelectorAll('#adsStatusBtnGroup .gd-btn')
        btns.forEach((item, i) => {
            item.addEventListener('click', e => {
                changeAdGoal(i)
            })
        })
        // mobile
        let select = new Select()
        select.setElement([document.getElementById('adsStatusSelect')])
        select.setSelectedEvent(e => {
            changeAdGoal(+e.target.getAttribute('data-index'))
        })
        select.init()
    }

    let oldType = 0

    function changeAdGoal(type) {
        if (type !== oldType) {
            oldType = type
            const e = document.getElementById('adsBaseInfo')
            const list = e.querySelectorAll('.sub-title')
            const avgErLabel = e.querySelector('.title span')
            <#if isMobile == false>
            const pops = e.querySelectorAll('.gd-popover__inner')
            <#else>
            const adGobalTipEle = document.getElementById('adGobalTip')
            let str = ''
            </#if>
            if (type === 0) {
                list[0].innerHTML = (adGobal.adCount ? numFormat(+adGobal.adCount) : '-')
                list[1].innerHTML = (adGobal.adMediaRate ? numFormat(+adGobal.adMediaRate) : '-') + '%'
                list[2].innerHTML = (+adGobal.adEc ? numFormat(+adGobal.adEc) : '-')
                list[3].innerHTML = (adGobal.adMediaEr ? numFormat(+adGobal.adMediaEr) : '-') + '%'
                avgErLabel.innerText = 'Avg Ads Engagements'
                <#if isMobile == false>
                pops[0].setAttribute('content', 'Amount of posts which tagged business accounts in recent 30-day.')
                pops[0].innerText = 'Amount of posts which tagged business accounts in recent 30-day.'
                pops[1].setAttribute('content', 'Ads Posts / Total Posts in recent 30-day.')
                pops[1].innerText = 'Ads Posts / Total Posts in recent 30-day.'
                pops[2].setAttribute('content', 'Average comments and likes of ads posts in recent 30-day.')
                pops[2].innerText = 'Average comments and likes of ads posts in recent 30-day.'
                <#else>
                str += '<dl>' +
                    '<dt>1. Ads Posts</dt>' +
                    '<dd>Amount of posts which tagged business accounts in recent 30-day.</dd>' +
                    '<dt>2. Ads / Posts Ratio</dt>' +
                    '<dd>Ads Posts / Total Posts in recent 30-day.</dd>' +
                    '<dt>3. Avg Ads Engagements</dt>' +
                    '<dd>Average comments and likes of ads posts in recent 30-day.</dd>' +
                    '<dt>4. Avg Ads ER</dt>' +
                    '<dd>Average business account tagged posts engagement / total follower count * 100%</dd>' +
                    '</dl>'
                adGobalTipEle.setAttribute('content', str)
                </#if>
            } else if (type === 1) {
                list[0].innerHTML = (adGobal.adImageCount ? numFormat(+adGobal.adImageCount) : '-')
                list[1].innerHTML = (adGobal.adImageRate ? numFormat(+adGobal.adImageRate) : '-') + '%'
                list[2].innerHTML = (+adGobal.adImageEc ? numFormat(+adGobal.adImageEc) : '-')
                list[3].innerHTML = (adGobal.adImageEr ? numFormat(+adGobal.adImageEr) : '-') + '%'
                avgErLabel.innerText = 'Avg Ads Engagements'
                <#if isMobile == false>
                pops[0].setAttribute('content', 'Amount of image posts which tagged business accounts in recent 30-day.')
                pops[0].innerText = 'Amount of image posts which tagged business accounts in recent 30-day.'
                pops[1].setAttribute('content', 'Image Ads / Total Posts in recent 30-day.')
                pops[1].innerText = 'Image Ads / Total Posts in recent 30-day.'
                pops[2].setAttribute('content', 'Average comments and likes of image ads in recent 30-day.')
                pops[2].innerText = 'Average comments and likes of image ads in recent 30-day.'
                <#else>
                str += '<dl>' +
                    '<dt>1. Ads Posts</dt>' +
                    '<dd>Amount of image posts which tagged business accounts in recent 30-day.</dd>' +
                    '<dt>2. Ads / Posts Ratio</dt>' +
                    '<dd>Image Ads / Total Posts in recent 30-day.</dd>' +
                    '<dt>3. Avg Ads Engagements</dt>' +
                    '<dd>Average comments and likes of image ads in recent 30-day. </dd>' +
                    '<dt>4. Avg Ads ER</dt>' +
                    '<dd>Average Ads Engagement / Total Follower Count * 100% </dd>' +
                    '</dl>'
                adGobalTipEle.setAttribute('content', str)
                </#if>
            } else {
                list[0].innerHTML = (adGobal.adVideoCount ? numFormat(+adGobal.adVideoCount) : '-')
                list[1].innerHTML = (adGobal.adVideoRate ? numFormat(+adGobal.adVideoRate) : '-') + '%'
                list[2].innerHTML = (+adGobal.adVideoEvc ? numFormat(+adGobal.adVideoEvc) : '-')
                list[3].innerHTML = (adGobal.adVideoEr ? numFormat(+adGobal.adVideoEr) : '-') + '%'
                avgErLabel.innerText = 'Avg Views'
                <#if isMobile == false>
                pops[0].setAttribute('content', 'Amount of video posts which tagged business accounts in recent 30-day.')
                pops[0].innerText = 'Amount of video posts which tagged business accounts in recent 30-day.'
                pops[1].setAttribute('content', 'Video Ads / Total Posts in recent 30-day.')
                pops[1].innerText = 'Video Ads / Total Posts in recent 30-day.'
                pops[2].setAttribute('content', 'Average views of video posts in recent 30-day.')
                pops[2].innerText = 'Average views of video posts in recent 30-day.'
                <#else>
                str += '<dl>' +
                    '<dt>1. Ads Posts</dt>' +
                    '<dd>Amount of video posts which tagged business accounts in recent 30-day.</dd>' +
                    '<dt>2. Ads / Posts Ratio</dt>' +
                    '<dd>Video Ads / Total Posts in recent 30-day.</dd>' +
                    '<dt>3. Avg Views</dt>' +
                    '<dd>Average views of video posts in recent 30-day.</dd>' +
                    '<dt>4. Avg Ads ER</dt>' +
                    '<dd>Average Ads Engagement / Total Follower Count * 100% </dd>' +
                    '</dl>'
                adGobalTipEle.setAttribute('content', str)
                </#if>
            }
        }
    }

    function getAdGoal() {
        _axios.get('/ins/blogger/adGoal/${blogger.uid?c}').then(res => {
            if (res.Code === 200) {
                adGobal = res.Data
                const e = document.getElementById('adsBaseInfo')
                const list = e.querySelectorAll('.sub-title')
                list[0].innerHTML = (adGobal.adCount ? numFormat(+adGobal.adCount) : '-')
                list[1].innerHTML = (adGobal.adMediaRate ? numFormat(+adGobal.adMediaRate) : '-') + '%'
                list[2].innerHTML = (+adGobal.adEc ? numFormat(+adGobal.adEc) : '-')
                list[3].innerHTML = (adGobal.adMediaEr ? numFormat(+adGobal.adMediaEr) : '-') + '%'
                const anaEle = document.getElementById('adsBaseInfoAna')
                const anaList = anaEle.querySelectorAll('.sub-title span')
                anaList[0].innerText = (adGobal.adMediaRate ? numFormat(+adGobal.adMediaEr) : '-') + '%'
                anaList[1].innerText = (adGobal.exceed ? numFormat(+adGobal.exceed) : '-') + '%'
                anaList[2].innerText = (adGobal.sameSizeErRate ? numFormat(+adGobal.sameSizeErRate) : '-') + '%'
            }
        })
    }

    // Tagged Brands
    function getAdTagBrandCategory() {
        return _axios.get('/ins/blogger/adTagBrandCategory/${blogger.uid?c}').then(res => {
            if (res.Code === 200) {
                const brandSumCount = res.Data.brandSumCount
                const tagBrandWrap = document.getElementById('tagBrandWrap')
                if (brandSumCount > 0) {
                    const select = document.getElementById('tagBrandCategorySelect')
                    const list = document.getElementById('tagBrandCategoryList')
                    let options = '<li class="gd-option is-active">All</li>'
                    let items = '<li class="tag-item is-active">All ( ' + brandSumCount + ' ) </li>'
                    res.Data.brandCategory.forEach(item => {
                        options += '<li class="gd-option" value="' + item.categoryName + '">' + item.categoryName + '</li>'
                        items += '<li class="tag-item" value="' + item.categoryName + '">' + item.categoryName + ' ( ' + item.brandCount + ' ) </li>'
                    })
                    select.innerHTML = options
                    list.innerHTML = items
                    // pc端tag点击事件
                    const tagBrandCategoryList = list.querySelectorAll('.tag-item')
                    tagBrandCategoryList.forEach(item => {
                        item.addEventListener('click', e => {
                            if (!e.target.classList.contains('is-active')) {
                                e.target.parentElement.querySelector('.is-active').classList.remove('is-active')
                                e.target.classList.add('is-active')
                                categoryName = e.target.getAttribute('value')
                                tagBrandPage = 1
                                getAdTagBrandList()
                            }
                        })
                    })
                    // 移动端tag选中事件
                    let gdSelect = new Select()
                    gdSelect.setElement(tagBrandWrap.querySelectorAll('.gd-select'))
                    gdSelect.setSelectedEvent(e => {
                        categoryName = e.target.getAttribute('value')
                        tagBrandPage = 1
                        getAdTagBrandList()
                    })
                    gdSelect.init()
                } else {
                    showNoDataImg(tagBrandWrap)
                }
            }
        })
    }
</script>